<%--
  Created by IntelliJ IDEA.
  User: wang
  Date: 2024/6/3
  Time: 14:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>
    <script type="" src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<h1>新增用户</h1>
<form id="post">
    姓名<input type="text" name="userName">
    密码<input type="text" name="password">
    余额<input type="text" name="money">
    <button>提交</button>
</form>

<script>
    // 新增用户信息
    $('#post').submit(function (e) {
        e.preventDefault();
        const userName = $(this).find('[name="userName"]').val()
        const password = $(this).find('[name="password"]').val()
        const money = $(this).find('[name="money"]').val()
        const obj = {userName: userName, password: password, money: money}

        $.ajax({
            url: 'users',
            type: 'post',
            data: obj,
            success: (res) => {
                setTimeout(() => {
                    alert(res.msg)
                }, 250)
                $(this).find('[type="reset"]').click()
            },
            error: () => {
                alert('服务器异常！！！')
            }
        })
    })
</script>

<h1>修改</h1>
<form action="" id="update">
    id<input type="text" name="userId">
    姓名<input type="text" name="userName">
    密码<input type="text" name="password">
    余额<input type="text" name="money">
    <button>提交</button>
</form>
<script>
    $('#update').submit(function (e) {
        const userId = $(this).find('[name="userId"]').val()
        alert(userId)
        const userName = $(this).find('[name="userName"]').val()
        alert(userName)
        const password = $(this).find('[name="password"]').val()
        const money = $(this).find('[name="money"]').val()
        const obj = { userId: userId, userName: userName, password: password, money: money }

        e.preventDefault();
        $.ajax({
            url: 'users',
            type: 'put',
            contentType: 'application/json;charset=utf-8',
            data: JSON.stringify(obj),
            success: (res) => {
                alert(res.msg)
            },
            error: () => {
                alert('服务器异常')
            }
        })
    })
</script>
<h1>删除</h1>
<form action="/users" id="delete">
    id<input type="text" name="userId">
    <button>提交</button>
</form>
<script>
    $('#delete').submit(function (e) {
        const userId = $(this).find('[name="userId"]').val();
        console.log(userId);
        e.preventDefault();
        $.ajax({
            url: '/users/' + userId,
            type: 'DELETE',
            success: (res) => {
                console.log(res.msg);
            },
            error: () => {
                console.log('服务器异常');
            }
        });
    });
</script>
<h1>用户列表</h1>
<h4>当前页: ${pinfo.pageNum}</h4>
<h4>每页条数:${pinfo.pageSize}</h4>
<h4>总条数:${pinfo.total}</h4>
<h4>总页数:${pinfo.pages}</h4>
<%--${pinfo}--%>
<c:forEach items="${pinfo.list}" var="t">
    <p>${t.userId}--${t.userName}--${t.money}</p>
</c:forEach>
<%--页码的显示--%>
<c:forEach items="${pinfo.navigatepageNums}" var="p">
    <a href="users?page=${p}">${p}</a>
</c:forEach>
</body>
</html>
